<template>
  <div class="getBlog">
    <el-card class="box-card" style="height: 390px">
      <template #header>我的博客</template>
      <div v-if="blogStore.blogContent && blogStore.blogContent.length == 0">
        <el-button type="primary" @click="toAddBlog" class="add"
          >去创建博客</el-button
        >
        <el-empty description="description" />
      </div>
      <div v-else>
        <el-table
          :data="blogStore.blogContent"
          border
          stripe
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column prop="author" label="作者" width="100" />
          <el-table-column prop="title" label="博客名称" width="180" />
          <el-table-column prop="content" label="博客内容" width="405" />

          <el-table-column label="操作" width="120">
            <el-button type="danger" :icon="Delete" circle @click="toDelete"/>
            <el-button typ="success" :icon="Edit" circle @click="toEdit"/>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script name="getBlog" setup>
import {Delete,Edit} from "@element-plus/icons-vue";
import { useBlogStore } from "@/store/Blog";
const blogStore=useBlogStore()
console.log(blogStore.blogContent,'===',blogStore);
const toDelete=()=>{
  console.log('删除');
  
}
const toEdit=()=>{
  console.log('修改');
  
}
</script>

<style lang="scss" scoped>
.getBlog {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  .el-card {
    width: 100%;
    height: 100%;
  }
}
</style>
